<template>
  <div>
  <div class="inspection_evaluation">
    <el-form :model="rfiViewData" style="margin:10px">
      <el-row>
        <el-col :span="4">
          <div class="col_label">审核结果</div>
        </el-col>
        <el-col :span="20">
          <div  class="col_view">{{rfiViewData.checkStatus === 1?'通过':rfiViewData.checkStatus === -1?'驳回':rfiViewData.checkStatus === 3?'待审核':''}}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col_label">审核意见</div>
        </el-col>
        <el-col :span="20">
          <div  class="col_view">{{rfiViewData.checkOpinion}}</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="col_label">反馈内容</div>
        </el-col>
        <el-col :span="20">
          <div  class="col_view">{{rfiViewData.feedbackComment}}</div>
        </el-col>
      </el-row>
    </el-form>
    <!-- <el-form :model="contentForm" :rules="rules" label-width="100px" style="margin-top: 20px">
        <el-form-item label="反馈内容:" prop="FeedbackComment" style="margin-bottom: 22px">
          <el-input type="textarea" v-model="contentForm.FeedbackComment"></el-input>
        </el-form-item>
    </el-form> -->
    <el-table :data="tableData5" style="width: 100%; margin: 16px;" border row-key="id" :expand-row-keys="expandRowkeys">
      <el-table-column type="expand">
        <template slot-scope="props">
          <expand-child :parentData="props.row" :ref="'expand-' + props.row.id"></expand-child>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作">
        <template slot-scope="props">
          <el-button type="text" @click="addChild(props.row.id,props.row.aptitudeFlag)">上传</el-button>
        </template>
      </el-table-column> -->
     <el-table-column
        label="资料名称"
        prop="dataName">
      </el-table-column>
      <el-table-column
        label="作用域" :formatter="getScope"
        prop="actionScope">
      </el-table-column>
      <el-table-column
        label="认证" :formatter="getAptitude"
        prop="aptitudeFlag">
      </el-table-column>
    </el-table>

    <el-dialog title="上传反馈信息明细" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" label-width="100px">
        <el-form-item label="颁发机构" prop="issueOrg">
          <el-input v-model="form.issueOrg" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="认证日期" prop="beginDate">
          <el-date-picker
                v-model="form.beginDate"
                type="date"
                placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="失效日期" prop="endDate">
          <el-date-picker
            v-model="form.endDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
       <!-- <el-form-item label="资质附件" prop="rfiFile">
          <el-input v-model="form.rfiFile" auto-complete="off"></el-input>
        </el-form-item> -->
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="form.remarks" auto-complete="off"></el-input>
        </el-form-item>
        <el-input v-model="form.aptitudeFlag" v-if="isShow"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitChild">提交</el-button>
      </div>
    </el-dialog>

    <div style="margin-left:30px" class="el_submit" >
        <el-button type="primary" @click="goBack">返回</el-button>
    </div>
    </div>
  </div>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
  import expandChild from '@/components/vendormgt/rfi/vendor/childTable.vue';

  export default {
    data() {
      return {
        isShow: false,
        rfiItemId:'',
        vdRfiItemId:'',
        tableData5: [],
        childData: {},
        dialogFormVisible: false,
        rfiViewData:{

        },
        form: {
          issueOrg: '',
          beginDate: '',
          endDate: '',
          rfiFile: '',
          remarks: ''
        },
        expandRowkeys:[]
      }
    },
    components: {
      expandChild
    },
    mounted(){
      this.submitForm();
      this.getViewDetail();
    },
    methods: {
      addChild(id,aptitudeFlag) {
        this.form.aptitudeFlag = aptitudeFlag;
        this.vdRfiItemId = id;
        this.dialogFormVisible = true;
      },
      submitChild() {
        // form表单提交后台
      this.axios.post(this.lib.config.host.vendorMgt + "/vendormgt/vsp/rfiitem/feedBack/" +  this.rfiItemId + '/' + this.vdRfiItemId, this.form).then((response) => {
      // 提交完成后刷新
        this.dialogFormVisible = false;

        this.expandRowkeys.push(this.form.id); // 控制展开用，需要展开页面渲染之后才能获取ref

        this.$nextTick(()=>{
          this.$refs['expand-' + this.form.id].refresh();
          this.$refs['form'].resetFields();
        });
         })
          .catch(function (error) {
            console.log(error);
          });  
      },
      submitForm() {
        this.rfiItemId = this.$route.query.id;
        this.axios.post(this.lib.config.host.vendorMgt + "/vendormgt/vsp/rfi/queryRfiItems/" + this.$route.query.rfiId, {}).then((response) => {
          debugger;
          console.log(response.data);
            this.tableData5 = response.data;
          })
          .catch(function (error) {
            console.log(error);
          });
      },
      getViewDetail() {
       this.axios.post(this.lib.config.host.vendorMgt + "/vendormgt/vsp/rfi/toItemView/" + this.$route.query.id)
          .then((response)=>{
            this.rfiViewData = response.data;
          })
          .catch((error)=>{
            console.log(error);
          });
      },
       getScope(value) {
        if(value.actionScope == 1){
            return '公司';
        }
        if(value.actionScope == 2){
            return '材料';
        }
        if(value.actionScope == 3){
            return '其它';
        }
      },
      getIndate(value) {
        if(value.indateFlag == 1){
            return '永久';
        }
        if(value.indateFlag == 2){
            return '过期失效';
        }
        if(value.indateFlag == 3){
            return '一次性';
        }        
      },
      getAptitude(value) {
        if(value.aptitudeFlag == 0){
            return '否';
        }
        if(value.aptitudeFlag == 1){
            return '是';
        }
      },
      goBack(){
        this.$router.go(-1);
      }
    }
  }
</script>
